<script setup lang="ts">
defineOptions({
  name: "overviewSecondRows"
});
import { ref, reactive } from "vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import overviewSecondRowItem from "./overviewSecondRowItem.vue";
import { useInitLoading } from "@/hooks/useCommon";
import { loadingTimeout } from "@/utils/http/constant";

interface Props {
  queryData?: any;
  height?: number;
}

const props = withDefaults(defineProps<Props>(), { height: 220 });

const title = ref<string>("纯水品质");
const overviewSecondRowsClass = ref<string>(`overviewSecondRows_${Math.random().toString(36).slice(2, 10)}`);
const loadingInstance = ref<any>(null);

const initLoading = () => {
  const target = `.${overviewSecondRowsClass.value}`;
  loadingInstance.value = useInitLoading(target);
  setTimeout(() => {
    loadingInstance.value.close();
  }, loadingTimeout);
  return loadingInstance.value;
};

defineExpose({
  initLoading,
  loadingInstance
});
</script>

<template>
  <modelBox :title="title" :borderRadius="false">
    <px-scrollbar v-if="queryData?.length" :wrap-class="overviewSecondRowsClass">
      <div class="overview-second-rows">
        <div v-for="item in queryData" :key="item.icon" class="overview-second-rows-item">
          <overviewSecondRowItem :data="item" />
        </div>
      </div>
    </px-scrollbar>
    <px-empty v-else :image-size="60" :class="overviewSecondRowsClass" />
  </modelBox>
</template>

<style lang="scss" scoped>
.px-scrollbar {
  width: 100%;
  height: 100%;

  :deep(.px-scrollbar__view) {
    width: 100%;
    height: 100%;

    .overview-second-rows {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 100%;

      .overview-second-rows-item {
        flex: 1;
        min-width: 160px;
      }
    }
  }
}
</style>
